<script lang="ts" setup>
import type { TableColumns } from '@/types/antd'

defineOptions({
	name: 'rbac_adminer_AdminerList'
})

const dataSource = ref([])
const pagination = reactive({
	current: 1,
	pageSize: 10,
	total: 0
})
const queryParams = reactive({
	mobile: '',
	account_name: '',
	status: ''
})
const isEditShow = ref(false)
const editForm = reactive({
	id: 0,
	mobile: '',
	account_name: '',
	status: '',
	password: ''
})
const editFormRules = reactive({
	mobile: [{ required: true, message: t('管理员管理.请输入手机号') }],
	account_name: [{ required: true, message: t('管理员管理.请输入账户名') }],
	status: [{ required: true, message: t('验证.请选择状态!') }],
	password: [{ required: false }]
})
const editFormRef = ref()

// 使用函数动态返回表头，实现语言切换时的实时更新
const columns = computed((): TableColumns => {
	const columns: TableColumns = [
		{
			title: t('管理员管理.手机号'),
			dataIndex: 'mobile',
			align: 'center' as const,
			key: 'mobile'
		},
		{
			title: t('管理员管理.账户名'),
			dataIndex: 'account_name',
			align: 'center' as const,
			key: 'account_name'
		},
		{
			title: t('管理员管理.状态'),
			dataIndex: '_status',
			align: 'center' as const,
			key: '_status'
		},
		{
			title: t('管理员管理.创建时间'),
			dataIndex: '_created_at',
			align: 'center' as const,
			key: '_created_at'
		}
	]

	// 动态添加操作列
	if (Api.hasPermission('权限管理-修改管理员')) {
		columns.push({
			title: t('管理员管理.操作'),
			key: 'action',
			dataIndex: 'action',
			align: 'center' as const
		})
	}

	return columns
})

const fetch = () => {
	const formParams: any = {
		page: pagination.current,
		pageSize: pagination.pageSize,
		mobile: queryParams.mobile,
		account_name: queryParams.account_name,
		status: queryParams.status
	}
	formParams.permissionName = '权限管理-管理员列表'
	Api.post('/rbac/adminer/list', formParams, true).then((res: any) => {
		dataSource.value = []
		res.items.forEach((item: any) => {
			dataSource.value.push(item)
		})
		pagination.total = res._meta.totalCount
	})
}

const handleTableChange = (newPagination: any) => {
	pagination.current = newPagination.current
	pagination.pageSize = newPagination.pageSize
	fetch()
}

const showEditModal = (record?: any) => {
	editForm.id = record?.id || 0
	editForm.mobile = record?.mobile || ''
	editForm.account_name = record?.account_name || ''
	editForm.status = record?.status || Enums.common.statusDatas.ACTIVE[0]
	editForm.password = ''
	isEditShow.value = true
}

const editOk = () => {
	editFormRef.value
		.validate()
		.then((valid: any) => {
			valid.id = editForm.id
			let permission = '权限管理-添加管理员'
			if (valid.id > 0) {
				permission = '权限管理-修改管理员'
			}
			valid.permissionName = permission
			Api.post('/rbac/adminer/add-or-edit', valid, true).then((data: any) => {
				if (data) {
					Api.notify(t('提示.保存成功'))
					isEditShow.value = false
					fetch()
				}
			})
		})
		.catch((error: any) => {
			console.log(error)
		})
}

const editCancel = () => {
	isEditShow.value = false
}

onMounted(() => {
	fetch()
})
</script>

<template>
	<IsGuest>
		<view :class="{ 'rbac-AdminerList': true }">
			<view>
				<a-form :model="queryParams" layout="inline">
					<a-form-item :label="t('管理员管理.手机号')">
						<a-input
							v-model:value="queryParams.mobile"
							:placeholder="t('管理员管理.请输入手机号')" />
					</a-form-item>
					<a-form-item :label="t('管理员管理.账户名')">
						<a-input
							v-model:value="queryParams.account_name"
							:placeholder="t('管理员管理.请输入账户名')" />
					</a-form-item>
					<a-form-item :label="t('管理员管理.状态')">
						<a-select v-model:value="queryParams.status">
							<a-select-option value="">{{ t('标签.全部') }}</a-select-option>
							<a-select-option
								v-for="(item, key) in Enums.common.statusDatas"
								:key="key"
								:value="item[0]">
								{{ item[1] }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item>
						<a-button type="primary" html-type="submit" @click="fetch">
							{{ t('按钮.筛选') }}
						</a-button>
					</a-form-item>
					<a-form-item v-if="Api.hasPermission('权限管理-添加管理员')">
						<a-button type="default" html-type="submit" @click="showEditModal">
							{{ t('管理员管理.添加管理员') }}
						</a-button>
					</a-form-item>
				</a-form>
			</view>
			<a-divider />
			<view>
				<a-table
					:columns="columns"
					:bordered="true"
					:data-source="dataSource"
					:pagination="pagination"
					@change="handleTableChange">
					<template #bodyCell="{ text, record, index, column }">
						<template v-if="column.key === 'action'">
							<a-button @click="showEditModal(record)">
								{{ t('管理员管理.编辑管理员') }}
							</a-button>
						</template>
					</template>
				</a-table>
				<a-modal
					:title="editForm.id > 0 ? t('编辑') : t('添加')"
					:open="isEditShow"
					@ok="editOk"
					@cancel="editCancel">
					<a-form
						ref="editFormRef"
						:model="editForm"
						:label-col="{ style: { width: '180px' } }"
						:rules="editFormRules">
						<a-form-item :label="t('管理员管理.手机号')" name="mobile">
							<a-input
								v-model:value="editForm.mobile"
								:placeholder="t('管理员管理.请输入手机号')" />
						</a-form-item>
						<a-form-item :label="t('管理员管理.账户名')" name="account_name">
							<a-input
								v-model:value="editForm.account_name"
								:placeholder="t('管理员管理.请输入账户名')" />
						</a-form-item>
						<a-form-item :label="t('管理员管理.状态')" name="status">
							<a-radio-group v-model:value="editForm.status">
								<a-radio
									v-for="(item, key) in Enums.common.statusDatas"
									:key="key"
									:value="item[0]">
									{{ item[1] }}
								</a-radio>
							</a-radio-group>
						</a-form-item>
						<a-form-item :label="t('管理员管理.密码')" name="password">
							<a-input
								type="password"
								v-model:value="editForm.password"
								:placeholder="
									editForm.id > 0
										? t('管理员管理.密码修改提示')
										: t('管理员管理.请输入密码')
								" />
						</a-form-item>
					</a-form>
				</a-modal>
			</view>
		</view>
	</IsGuest>
</template>

<style lang="scss" scoped></style>
